<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>
	<label for="name">你的名字:</label>
	<input id="name" type="text" />
	<input id="connetion" type="button" value="加入到聊天室"/>
	<br>
	<textarea id="review" rows="20" cols="100"></textarea>
	<br>
	<textarea id="msg" rows="5" cols="100"></textarea>
	<br>
	<input id="send" style="width:836px"  type="button" value="发送"/>
</body>

<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		var socket;
		var _review = $("#review");
		var _msg = $("#msg");
		
		
		function conetion(name)
		{

			socket = new WebSocket("ws://127.0.0.1:7878/ws/"+name);
			
			socket.onopen = function(event) {
				var content = "已成功连接到服务器!" + new Date();
				_review.val(content);
			};
			
			socket.onmessage = function(event) {
				var content = event.data;
				_review.val(_review.val() + "\n" + content);
			};
			
			socket.oncolse = function(event) {
				var content = "已断开连接!"
				_review.val(_review.val() + "\n" + content);
			};
			
			socket.onerror = function (err) {
				console.log("error");
				console.log(err);
			};

			
		};
		
		
		$("#connetion").click(function()
		{
			conetion($("#name").val());
		});
		
		$("#send").click(function()
		{
			if(socket.readyState == WebSocket.OPEN){
				console.log("发送消息!");
				var msg = $("#msg").val();
				$("#msg").val("");
				socket.send(msg);
			}else {
				console.log("未连接web socket!");
			}
			
		});
		
	});

</script>
</html>